<!--
 * 遮罩层
 * @作者: 陈老师儿~
 * @手机: 18560000860
 -->
<template>
    <view class="pure-modal-container">
        <!-- Overlay -->
        <pure-overlay :show="show" @close="handleOverlayClose"></pure-overlay>

        <!-- Popup -->
        <view class="pure-modal" :class="classes" :style="styles" @transitionend="handleTransitionEnd" @tap.stop>
            <!-- Header -->
            <!-- 兼容京东多slot写法 -->
            <view class="pure-modal-header" v-if="header">
                <slot name="header" v-if="$slots.header"></slot>
                <text class="pure-modal-title" v-if="!$slots.header">{{ title }}</text>
            </view>

            <!-- Body -->
            <view class="pure-modal-body">
                <scroll-view
                    class="pure-modal-scroll-view"
                    :scroll-x="scrollX"
                    :scroll-y="scrollY"
                    :show-scrollbar="showScrollbar"
                    :upper-threshold="upperThreshold"
                    :refresher-enabled="refresherEnabled"
                    :lower-threshold="lowerThreshold"
                    :refresher-threshold="refresherThreshold"
                    :refresher-default-style="refresherDefaultStyle"
                    :refresher-background="refresherBackground"
                    :refresher-triggered="refresherTriggered"
                    @scrolltoupper="handleScrollToUpper"
                    @scrolltolower="handleScrollToLower"
                    @refresherpulling="handleRefresherPulling"
                    @refresherrefresh="handleRefresherRefresh"
                    @refresherrestore="handleRefresherStore"
                    @refresherabort="handleRefresherAbort"
                >
                    <slot></slot>
                </scroll-view>
            </view>

            <!-- Footer -->
            <view class="pure-modal-footer" v-if="$slots.footer || showCancel || showConfirm">
                <!-- 兼容京东多slot写法 -->
                <slot name="footer" v-if="$slots.footer"></slot>
                <view class="pure-modal-footer-buttons" v-else>
                    <!-- 取消按钮 -->
                    <slot name="cancel" v-if="$slots.cancel"></slot>
                    <view class="pure-modal-button pure-button-block pure-modal-button-cancel" v-if="showCancel && !$slots.cancel">
                        <pure-button
                            :text="cancelText"
                            :class="cancelClass"
                            v-bind="cancelOpts"
                            @onClick="handleCancel"
                            @getphonenumber="handleGetPhoneNumber($event, 'cancel')"
                            @getuserinfo="handleGetUserInfo($event, 'cancel')"
                            @error="handleError($event, 'cancel')"
                            @opensetting="handleOpenSetting($event, 'cancel')"
                            @launchapp="handleLaunchApp($event, 'cancel')"
                            @contact="handleContact($event, 'cancel')"
                            @chooseavatar="handleChooseAvatar($event, 'cancel')"
                            @agreeprivacyauthorization="handleAgreePrivacyAuthorization($event, 'cancel')"
                            @addgroupapp="handleAddGroupApp($event, 'cancel')"
                            @chooseaddress="handleChooseAddress($event, 'cancel')"
                            @chooseinvoicetitle="handleChooseInvoiceTitle($event, 'cancel')"
                            @subscribe="handleSubscribe($event, 'cancel')"
                            @login="handleLogin($event, 'cancel')"
                            @im="handleIM($event, 'cancel')"
                        ></pure-button>
                    </view>

                    <!-- 分割线 -->
                    <view class="pure-modal-button-gap-line" v-if="(showCancel || $slots.cancel) && (showConfirm || $slots.confirm) && !hideLine"></view>

                    <!-- 确认按钮 -->
                    <slot name="confirm" v-if="$slots.confirm"></slot>
                    <view class="pure-modal-button pure-button-block pure-modal-button-confirm" v-if="showConfirm && !$slots.confirm">
                        <pure-button
                            :text="confirmText"
                            :class="confirmClass"
                            v-bind="confirmOpts"
                            @onClick="handleConfirm"
                            @getphonenumber="handleGetPhoneNumber($event, 'confirm')"
                            @getuserinfo="handleGetUserInfo($event, 'confirm')"
                            @error="handleError($event, 'confirm')"
                            @opensetting="handleOpenSetting($event, 'confirm')"
                            @launchapp="handleLaunchApp($event, 'confirm')"
                            @contact="handleContact($event, 'confirm')"
                            @chooseavatar="handleChooseAvatar($event, 'confirm')"
                            @agreeprivacyauthorization="handleAgreePrivacyAuthorization($event, 'confirm')"
                            @addgroupapp="handleAddGroupApp($event, 'confirm')"
                            @chooseaddress="handleChooseAddress($event, 'confirm')"
                            @chooseinvoicetitle="handleChooseInvoiceTitle($event, 'confirm')"
                            @subscribe="handleSubscribe($event, 'confirm')"
                            @login="handleLogin($event, 'confirm')"
                            @im="handleIM($event, 'confirm')"
                        ></pure-button>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import props from "./props.js";
    export default {
        options: {
            // 将自定义节点设置成虚拟的
            // 头条、飞书：因为合并后丢失事件和 'provide/inject'
            // 京东：因为合并后不能合并外层 'class'
            // 百度：因为合并后会在控制台疯狂报警告
            // #ifndef MP-TOUTIAO || MP-LARK || MP-JD || MP-BAIDU
            virtualHost: true,
            // #endif

            // 组件样式隔离
            styleIsolation: "apply-shared",

            // 允许使用多个插槽
            multipleSlots: true,
        },
        props: props,
        emits: [
            "scrollUpper",
            "scrollLower",
            "refresherPulling",
            "refresherRefresh",
            "refresherRestore",
            "refresherAbort",
            "confirm",
            "cancel",
            "getphonenumber",
            "getuserinfo",
            "error",
            "opensetting",
            "launchapp",
            "contact",
            "chooseavatar",
            "agreeprivacyauthorization",
            "addgroupapp",
            "chooseaddress",
            "chooseinvoicetitle",
            "subscribe",
            "login",
            "im",
        ],
        data() {
            return {
                // 显示状态
                status: "hide",
            };
        },
        computed: {
            // classes
            classes() {
                const classes = [];

                // 显示状态类名
                classes.push(`pure-modal-${this.status}`);

                // 隐藏底部边框
                if (this.hideLine) classes.push("pure-modal-hide-line");

                return classes;
            },

            // styles
            styles() {
                const styles = [];
                return styles;
            },
        },
        watch: {
            // 监听显示状态
            async show(val) {
                // 设置对应的状态类名
                if (val) {
                    this.status = "before-show";
                    await this.$nextTick();
                    await this.sleep(20);
                    this.status = "to-show";
                } else {
                    this.status = "before-hide";
                    await this.$nextTick();
                    await this.sleep(20);
                    this.status = "to-hide";
                }
            },
        },
        async mounted() {
            // 初始化状态
            this.status = this.show ? "show" : "hide";
        },
        methods: {
            // 遮罩点击事件
            handleOverlayClose() {
                // 点击遮罩不可关闭
                if (this.stopCloseOnClickOverlay) return;
                if (this.overlay) this.$emit("cancel");
            },

            // 确认事件
            handleConfirm() {
                this.$emit("confirm");
            },

            // 取消事件
            handleCancel() {
                this.$emit("cancel");
            },

            // 过渡结束事件
            handleTransitionEnd() {
                // 更新状态
                if (this.status === "to-show") {
                    this.status = "show";
                    return;
                }
                if (this.status === "to-hide") {
                    this.status = "hide";
                    return;
                }
            },

            // getPhoneNumber
            handleGetPhoneNumber(e, from) {
                this.$emit("getphonenumber", e, from);
            },

            // getUserInfo
            handleGetUserInfo(e, from) {
                this.$emit("getuserinfo", e, from);
            },

            // error
            handleError(e, from) {
                this.$emit("error", e, from);
            },

            // openSetting
            handleOpenSetting(e, from) {
                this.$emit("opensetting", e, from);
            },

            // launchApp
            handleLaunchApp(e, from) {
                this.$emit("launchapp", e, from);
            },

            // contact
            handleContact(e, from) {
                this.$emit("contact", e, from);
            },

            // chooseAvatar
            handleChooseAvatar(e, from) {
                this.$emit("chooseavatar", e, from);
            },

            // agreePrivacyAuthorization
            handleAgreePrivacyAuthorization(e, from) {
                this.$emit("agreeprivacyauthorization", e, from);
            },

            // addGroupApp
            handleAddGroupApp(e, from) {
                this.$emit("addgroupapp", e, from);
            },

            // chooseAddress
            handleChooseAddress(e, from) {
                this.$emit("chooseaddress", e, from);
            },

            // chooseInvoiceTitle
            handleChooseInvoiceTitle(e, from) {
                this.$emit("chooseinvoicetitle", e, from);
            },

            // subscribe
            handleSubscribe(e, from) {
                this.$emit("subscribe", e, from);
            },

            // login
            handleLogin(e, from) {
                this.$emit("login", e, from);
            },

            // im
            handleIM(e, from) {
                this.$emit("im", e, from);
            },

            // 滚动到顶部/左边
            handleScrollToUpper() {
                this.$emit("scrollUpper");
            },

            // 滚动到底部/右边
            handleScrollToLower() {
                this.$emit("scrollLower");
            },

            // 自定义下拉刷新控件被下拉
            handleRefresherPulling() {
                this.$emit("refresherPulling");
            },

            // 自定义下拉刷新被触发
            handleRefresherRefresh() {
                this.$emit("refresherRefresh");
            },

            // 自定义下拉刷新被复位
            handleRefresherStore() {
                this.$emit("refresherRestore");
            },

            // 自定义下拉刷新被中止
            handleRefresherAbort() {
                this.$emit("refresherAbort");
            },

            // Sleep
            sleep(time = 10) {
                return new Promise((resolve) => {
                    let timer = setTimeout(() => {
                        clearTimeout(timer);
                        resolve();
                    }, time);
                });
            },
        },
    };
</script>

<style scoped>
    @import "./style.css";
</style>
